
<template>
<div class="merge">
  <div class="m-title">
    <backBtn type="customer"></backBtn>{{$t('customer.mergeCustomers.title')}}
  </div>
  <div class="merge-content">
  <main>
    <div class="m-tag">
      <h3>{{$t('customer.mergeCustomers.h3')}}:</h3>
      <p>{{$t('customer.mergeCustomers.mergeTips1')}}</p>
      <p>{{$t('customer.mergeCustomers.mergeTips2')}}</p>
    </div>
    <div class="m-cust">
      <div class="m-cust-go">
        <span class="mc-name" >
          <span class="mc-name__span">{{customerA.name}}</span>
          <el-button class="mc-query" type="text" @click.stop="dialogTableVisible('a')">
            <i class="iconfont icon-sousuo"></i>
          </el-button>
        </span>
      </div>
      <span class="goto">{{$t('customer.mergeCustomers.mergeTo')}}</span>
      <div class="m-cust-to">
        <span class="mc-name">
          <span class="mc-name__span">{{customerB.name}}</span>
          <el-button class="mc-query" type="text"  @click.stop="dialogTableVisible('b')">
          <i class="iconfont icon-sousuo"></i>
          </el-button>
        </span>

      </div>
      <div class="m-cust-scan">
        <el-button  type="primary" class="primary_btn" @click="isFormFun" :disabled="btn">{{$t('customer.mergeCustomers.mergeScan')}}</el-button>
      </div>
      <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" title="选择客户" class="customer-dialog" :visible.sync="isDalog" v-if="isDalog" width="50%">
        <add-customer
          :isBlight = "false"
          :isTitle = "false"
          :labelValue = "6"
          :isDalog = "isDalog"
          :clearnTable="clearnTable"
          :reSize="true"
          :heightSize = "560"
          @merge="mergeCustomer"
        ></add-customer>
      </el-dialog>
    </div>
    <div class="merg-form" v-if="isMergeForm">
      <edit-cus
        :custInfo="mergedCustInfo"
        :editCustType ="'update'"
        :isMergeCustomer = "true"
        :currentBusinessObj = "currentBusinessObj"
        @editCust='updateCustomer'
      ></edit-cus>
    </div>
  </main>
  </div>
</div>
</template>
<script>
  import addCustomer from '@/components/business-modules/customer/AddCustomer.vue'
  import EditCus from '@/components/business-modules/customer/AddCus.vue'
  import backBtn from '@/components/public-modules/side-bar/BackSideBar.vue'
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'MergeCustomers',
    data () {
      return {
        isForm: false,
        radio: 0,
        btn: false,
        isMergeForm: false,
        isDalog: false,
        isresult: true,
        isShowHearder: false,
        tableData: [],
        multipleSelection: [],
        input: '',
        clearnTable: false,
        customerTag: '',
        currentBusinessObj: {
          type: 'customer',
          tabType: 'customer_my'
        },
        customerA: {name: this.$t('customer.mergeCustomers.custA'), _id: 'a'},
        customerB: {name: this.$t('customer.mergeCustomers.custB'), _id: 'b'},
        mergedCustInfo: {},
        select: 'phone',
        loading: true,
        tabType: ''
      }
    },
    methods: {
      updateCustomer (form) {
        let custA = deepClone(this.customerA.custInfo)
        let custB = deepClone(this.customerB.custInfo)
        this.tabType = form.owner === this.$store.state.session.sessionId ? 'customer_my' : 'customer_all'
        form.type = 'customer'
        form.tabType = this.tabType
        form.id = custB._id
        form.custAId = custA._id
        form.custBId = custB._id
        this.$store.dispatch('mergeCustomer', form).then(() => {
          this.$router.push(`/index/customer/merge`)
          this.customerA = { name: this.$t('customer.mergeCustomers.custA'), _id: 'a' }
          this.customerB = { name: this.$t('customer.mergeCustomers.custB'), _id: 'b' }
          this.isMergeForm = false
        })
      },
      mergeCustomer (val) {
        this.isDalog = false
        this.customerTag === 'a' ? this.customerA = val : this.customerB = val
        if (this.customerA._id === this.customerB._id) {
          // this.$alert.title = ''
          // this.$alert('请不要合并同一个客户')
          this.$message({
            message: this.$t('customer.mergeCustomers.mergeWarn1'),
            type: 'warning'
          })
          this.customerTag === 'a' ? this.customerA = {name: this.$t('customer.mergeCustomers.mergeWarn2'), _id: 'a'} : this.customerB = {name: this.$t('customer.mergeCustomers.mergeWarn3'), _id: 'b'}
        }
      },
      dialogTableVisible (arg) {
        this.isDalog = true
        this.btn = false
        this.customerTag = arg
      },
      isFormFun () {
        this.btn = true
        this.isMergeForm = true
        if (this.customerA._id !== 'a' && this.customerB._id !== 'b') {
          let custA = deepClone(this.customerA.custInfo)
          let custB = deepClone(this.customerB.custInfo)
          // 归属
          if (custB.owner === 'NA' && custB.categoryId === 'NA') {
            custB.owner = custA.owner
            custB.categoryId = custA.categoryId
          }
          delete custA.owner
          delete custA.categoryId
          // 电话
          if (custA.phone && custB.phone) {
            custB.phone = [...custB.phone, ...custA.phone]
          } else if (!custB.phone || custB.phone.length === 0) {
            custB.phone = custA.phone
          }
          delete custA.phone
          // 邮箱
          if (custA.email && custB.email) {
            custB.email = [...custB.email, ...custA.email]
          } else if (!custB.email || custB.email.length === 0) {
            custB.email = custA.email
          }
          delete custA.email
          // 微信
          if (custA.weixin && custB.weixin) {
            custB.weixin = [...custB.weixin, ...custA.weixin]
          } else if (!custB.winxin || custB.winxin.length === 0) {
            custB.weixin = custA.weixin
          }
          delete custA.weixin
          // 附件
          if (!custB.attachs || custB.attachs.length === 0) {
            custB.attachs = custA.attachs
          }
          delete custA.attachs
          // 省 如果A用户的省为空，那么以B为准
//          if (!custA.province || custB.province === custA.province && !custA.city || custB.province === custA.province && custB.city === custA.city && !custA.district) {
//            delete custA.province
//            delete custA.city
//            delete custA.district
//          }
          // 如果B的省为空，以A为准
          if (!custB.province || custB.province.length === 0) {
            custB.province = custA.province
            custB.city = custA.city
            custB.district = custA.district
          } else {
            if (custA.province) {
              if (custB.province === custA.province) {
                // 如果A客户省不为空，A和B客户的的省相等 但是B的市为空 以A为准
                if (!custB.city || custB.city.length === 0) {
                  custB.city = custA.city
                  custB.district = custA.district
                } else {
                  if (custA.city) {
                    if (custB.city === custA.city) {
                      // 如果A市不为空，A和B客户的的市相等 但是B的区为空 以A为准
                      if (!custB.district || custB.district.length === 0) {
                        custB.district = custA.district
                        delete custA.district
                      } else {
                        if (custA.district) {
                          custB.district = custA.district
                          delete custA.district
                        }
                      }
                    } else {
                      custB.district = custA.district
                      delete custA.district
                    }
                  }
                }
              } else {
                // 如果A客户省不为空，A和B客户的的省不相等 以A为准
                custB.province = custA.province
                custB.city = custA.city
                custB.district = custA.district
              }
            }
          }
          delete custA.province
          delete custA.city
          delete custA.district
          // 市
//          if (!custB.city || custB.city.length === 0) {
//            custB.city = custA.city
//          }
          // 区
//          if (!custB.district || custB.district.length === 0) {
//            custB.district = custA.district
//          }
          if (custB && custB.fields && custB.fields.length) {
            for (let i = 0; i < custB.fields.length; i++) {
              let field = custB.fields[i]

              if (field.k === 'province') {
                field.v = custB.province
              }

              if (field.k === 'city') {
                field.v = custB.city
              }

              if (field.k === 'district') {
                field.v = custB.district
              }
            }
          }

          this.mergedCustInfo = Object.assign({}, custA, custB)

          this.isForm = true
        } else {
          // this.$alert.title = ''
          // this.$alert('请选完所有需要合并的客户')
          this.isMergeForm = false
          this.btn = false
          this.$message({
            message: this.$t('customer.mergeCustomers.mergeWarn4'),
            type: 'warning'
          })
        }
      }
    },
    watch: {
      isDalog (cur, pre) {
        if (!cur) {
          this.clearnTable = true
        } else {
          this.isMergeForm = false
        }
      }
    },
    components: {
      addCustomer,
      EditCus,
      backBtn
    },
//    beforeRouteLeave (to, from, next) {
//      this.$destroy()
//      next()
//    },
    beforeMount () {
      let tab = this.$route.path.split('/')[2]
      let tabType = this.$route.params.tabType
      if (tab === 'call') {
        this.input = this.$store.state[tab].current[tabType].callInfo.CALLED_NO
      }
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../assets/common.styl"
  .merge
    .merge-content
      height calc(100vh - 184px)
      padding-right 5.5%
      overflow-y auto
      margin 30px 0 0 30px
    .m-title
      border-bottom 1px solid $c-border1
      height 39px
      background $cf-white
      line-height 39px
      padding-left 24px
      font-size 16px
      color $cf-gray1
    .m-tag
      color $c-prompt
      border-radius 6px
      margin-bottom 30px
    .m-cust
      text-align left
      display flex
      .m-cust-go
      .m-cust-to
        .mc-query
          position absolute
          top -6px
          right 8px
          i
            color $c-border2
            font-size 20px
            font-weight 200
      .m-cust-go
        flex 3
        cursor not-allowed
      .goto
        color $c-prompt
        line-height 30px
        flex 1
      .m-cust-to
        flex 3
        cursor not-allowed
      .m-cust-scan
        flex 1
      .mc-name
          position relative
          border 1px solid $c-border1
          border-radius 4px
          padding 0 32px 0 6px
          display inline-block
          line-height 36px
          min-width 190px
          height 30px
          color $cf-gray1
          line-height 30px
          .mc-name__span
            display inline-block
            max-width 14em
            text-overflow ellipsis
            overflow hidden
            white-space nowrap
</style>
